<template>
  <div class="container">
    <div class="form">
      <span class="sp">管理员登陆</span>
      <el-form rel="form" :model="admin"  :rules="rules" label-width="60px" >
        <el-form-item prop="username">
          <div style="color:#CDD0D6;">用户名：</div>
          <el-input type="text" v-model="admin.username" size="large" style="width: 400px;" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <div style="margin-right: 14px; color:#CDD0D6;" >密码：</div>
          <el-input type="password" v-model="admin.password" size="large" style="width: 400px;" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="captchaInput">
          <div style="margin-right: 14px; color:#CDD0D6;" >验证码：</div>
          <el-input type="text" v-model="admin.captchaInput" size="large" style="width: 400px;" placeholder="请输入验证码"></el-input>
        </el-form-item>
        <el-image style="width: 120px; height: 38px; margin-top: 10px; margin-left: 60px;" :src="imageBase64Data" @click="getCaptcha"  />
        <el-form-item >
          <el-button type="primary" @click="login" >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import adminApi from "@/api/adminApi.js";
import { ref,reactive } from 'vue';
import { ElMessage } from 'element-plus';
import router from '@/router';
import { useTokenStore } from '@/stores/token';

const tokenStore = useTokenStore();
const admin = ref({
  username: '',
  password: '',
  captchaInput:'',
  key:''
})
const imageBase64Data = ref('');

//整个表单的校验规则
const rules = {
  username: [
    // 非空校验，
    //required表示是否必须输入
    // message表示不满足规则显示的信息
    //trigger：表示显示时机，blur表示是失去焦点，值换成change表示实时
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  captchaInput:[
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ]
}

function login() {
  adminApi.login(admin.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success({
            message: resp.msg,
            duration: 1000,
            onClose: () => {
              tokenStore.updateToken(resp.data);
              //跳转到首页
              router.push('/admin/index');
            }
          })
        } else {
          ElMessage.error(resp.msg);
        }
      });
}

function getCaptcha(){
  adminApi.captcha()
      .then(resp => {
        imageBase64Data.value=resp.data.imageBase64Data;
        admin.value.key=resp.data.key;
      })
}
getCaptcha();
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../../assets/1.jpg);
}
.container .form .sp{
  color: #F56C6C;
  font-size: 30px;
  font-weight: bold;
}
.form{
  background-color: rgba(0,0,0,0.5);
  width: 500px;
  height: 500px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
</style>